<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <title>宏烨看房</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .btn{
            margin-top:10px;
            margin-left: 80px;
        }
        .wrapBox {
            width: 800px;
            height: 550px;
            border: 1px solid #000;
            margin: 50px auto 0;
        }
        .videoBox {
            height: 500px;
            position: relative;
            overflow: hidden;
        }
        .videoBox img {
            width: 100%;
            height: 100%;
        }
        video {
            width: 100%;
        }
        .danmuSend {
            display: flex;
            height: 50px;
        }
        #content {
            flex: 1;
        }
        #send {
            width: 100px;
        }
        .danmu {
            color: #f00;
            font-size: 20px;
            position: absolute;
            left: 800px;
            top: 0;
            white-space: nowrap;
        }
        .danmu img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }
    </style>
</head>
<body>

<div class="wrapBox">
    <div>标题：{{$data['title']}},主播：{{$data['broker_name']}},关注数{{$data['attention']}}</div>
    <div class="videoBox">
        <!--<img src="http://imgvue.wyt.plus/2022-06-21/1.jpg" />-->
        <div id="id_test_video" style="width:100%; height:auto;"></div>
        <span class="danmu">我是弹幕</span>
    </div>
    <div class="danmuSend">
        <input id="content" type="text">
        <button id="send">发送</button>
    </div>
    <input type="hidden" value="{{$data['live_url']}}" class="live_url">

    <div class="btn">
        <a href="http://10.3.38.7:9527/#/marketing/like/list">
            <button style="width:100px" type="button" class="btn btn-danger">返回</button>
        </a>
        <button style="width:100px;margin-left:50px" type="button" class="btn btn-light">强制关闭</button>
    </div>
</div>

</body>
<script src="https://web.sdk.qcloud.com/player/tcplayerlite/release/v2.4.1/TcPlayer-2.4.1.js" charset="utf-8"></script>
<script src="49.234.23.21/live/TcPlayer-2.4.1.js"></script>
<script type="text/javascript" charset="utf-8">
    var live_url = $('.live_url').val()
    var player =  new TcPlayer('id_test_video', {
        "m3u8": live_url,
        // "flv": "http://bo.lvbaiyang.com/live/1.flv?txSecret=9f5c3dd3ae52f6a0c31ab16767958258&txTime=0",  //增加了一个 flv 的播放地址，用于PC平台的播放 请替换成实际可用的播放地址
        "autoplay" : true,      //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
        "poster" : "http://www.test.com/myimage.jpg",
        "width" :  '800',//视频的显示宽度，请尽量使用视频分辨率宽度
        "height" : '500'//视频的显示高度，请尽量使用视频分辨率高度
    });

</script>
<script>
    var oSend = document.querySelector('#send');
    var oContent = document.querySelector('#content');
    var oVideoBox = document.querySelector('.videoBox');
    //点击发送按钮时触发此事件
    oSend.onclick = function () {
        //获取文本框输入的内容
        var content = oContent.value;
        createDanmu(content)
    }
    function createDanmu(content) { // 创建弹幕 =>  移动  => 消失
        //新建一个span类型的标签
        var oSpan = document.createElement('span');
        //将获取的输入的内容传入标签
        oSpan.innerHTML = '<img src="http://imgvue.wyt.plus/2022-06-21/6.jpg">' + content;
        //添加其class属性,对头像图片进行样式修改
        oSpan.classList.add('danmu');
        //设置其字体颜色属性随机
        oSpan.style.color = randomColor();
        //在oVideoBox所代表的的标签内添加该元素
        oVideoBox.appendChild(oSpan);
        //使该新标签出现的位置随机
        oSpan.style.top = Math.round(Math.random() * (oVideoBox.clientHeight - oSpan.offsetHeight)) + 'px';
        //设置定时器,使其位置改变
        var timer = setInterval(function () {
            // 初始位置
            var start = oSpan.offsetLeft;
            // 偏移量
            start -= 10;
            //先判断,使其向左移动相对父元素的距离最终小于其右边时移除该元素,并清除该定时器
            if (start < -oSpan.offsetWidth) {
                clearInterval(timer);
                oSpan.remove();
            }
            // 赋值新位置
            oSpan.style.left = start + 'px';
        }, 100);
    }
    //用来生成随机颜色
    function randomColor() {
        return 'rgb(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ')';
    }
</script>
<script>
    var wsServer = 'ws://43.142.66.157:9502';
    var websocket = new WebSocket(wsServer);
    websocket.onopen = function (evt) {
        console.log("Connected to WebSocket server.");
    };

    websocket.onclose = function (evt) {
        console.log("Disconnected");
    };

    websocket.onmessage = function (evt) {
        console.log('Retrieved data from server: ' + evt.data);
    };

    websocket.onerror = function (evt, e) {
        console.log('Error occured: ' + evt.data);
    };
</script>
</html>
